<template>
	<view>
		<view class="bg-linear-ger" style="height: 250px;">
			<img class="pl-2 mt-5" src="static/logo.png" alt="" srcset="" />
		</view>
		<view class="bg-white rounded-top" style="position: relative; top: -100px">
			<view class="p-5 font text-FFC251 font-weight-bold-600">欢迎登录</view>
			<view class="pl-2 pr-2 lineHight-3">
				<u-field v-model="mobile" label="账号" placeholder="请输入登录账号">
				</u-field>
				<u-field v-model="code" label="密码" placeholder="请输入密码">
				</u-field>
				<view class="position-absolute right-2 mt-2" style="z-index: 1;">
					<canvas canvas-id="captchaCanvas" @tap="refreshCaptcha"
						style="width: 100px; height: 40px; background-color: #EEF7FF;"></canvas>
				</view>
				<!-- <input v-model="inputCaptcha" type="text" placeholder="请输入验证码" /> -->
				<u-field v-model="inputCaptcha" label="验证码" placeholder="请输入验证码" class="captcha-input"></u-field>

				<view class="u-inline-block">
					<u-checkbox v-model="agreementChecked" :label="true">我已阅读并同意</u-checkbox>
					<u-link href="/service-agreement" class="text-primary">《服务协议》</u-link>
					<u-link href="/privacy-policy" class="text-primary">《隐私政策》</u-link>
				</view>
			</view>

			<view class="pl-3 pr-3 ">
				<u-button shape="circle" @tap="verifyCaptcha" type="success" :disabled="!agreementChecked">登录</u-button>
			</view>

			<view class="text-center ">
				<view class=" font-13 text-999999 mt-2">其他登录方式</view>
				<view class="top-15 position-relative" @click="gitMins('/pages/login/phoneLogo')">
					<i class="p-1 iconfont icon-shouji font-28 main-text-color border-s "></i>
				</view>
			</view>
			<view @click="gitMin('/pages/tabbar/index/index')" class="position-absolute text-999999 font-13"
				style="margin-top: 50px; z-index: 1; left: 42.5%;">游客登录</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				captchaText: '', // 验证码文字
				inputCaptcha: '', // 用户输入的验证码
				mobile: '', // 手机号
				code: '', // 验证码
				agreementChecked: false // 是否同意协议
			};
		},
		mounted() {
			this.refreshCaptcha();
		},
		methods: {
			refreshCaptcha() {
				const ctx = uni.createCanvasContext('captchaCanvas', this);
				ctx.clearRect(0, 0, 100, 40); // 清除画布
				this.captchaText = this.generateCaptcha(); // 生成新的验证码文字
				this.drawCaptcha(ctx, this.captchaText); // 绘制验证码
				this.drawWave(ctx); // 绘制波浪线
				ctx.draw();
			},
			generateCaptcha() {
				// 生成随机的四位验证码
				return Math.random().toString(36).substr(2, 4).toUpperCase();
			},
			drawCaptcha(ctx, text) {
				// 随机生成颜色
				const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF'];
				ctx.setFontSize(20);
				for (let i = 0; i < text.length; i++) {
					const colorIndex = Math.floor(Math.random() * colors.length);
					const color = colors[colorIndex];
					ctx.setFillStyle(color);
					ctx.fillText(text[i], 10 + i * 20, 30); // 将验证码文字绘制到画布上
				}
			},
			drawWave(ctx) {
				ctx.beginPath();
				ctx.moveTo(0, 20); // 设置起点
				for (let i = 0; i <= 100; i += 10) {
					const y = i % 20 === 0 ? 20 : 30; // 波浪线上下振幅
					ctx.quadraticCurveTo(i + 5, y, i + 10, 20); // 绘制二次贝塞尔曲线
				}
				ctx.setStrokeStyle('#999999'); // 设置线条颜色
				ctx.stroke(); // 绘制线条
			},
			verifyCaptcha() {
				if (!this.agreementChecked) {
					uni.showToast({
						title: '请同意协议',
						icon: 'none'
					});
					return;
				}
				if (this.inputCaptcha.toUpperCase() === this.captchaText) {
					uni.showToast({
						title: '验证成功',
						icon: 'success'
					});
					// 验证成功后刷新验证码
					this.refreshCaptcha();
				} else {
					uni.showToast({
						title: '验证码错误',
						icon: 'none'
					});
				}
			},
			gitMins(url){
				uni.navigateTo({
					url
				})
			},
			gitMin(url) {
				uni.switchTab({
					url
				});
			}
		}
	};
</script>

<style scoped>
	canvas {
		border: 1px solid #cccccc;
	}

	input,
	button {
		margin-top: 10px;
	}

	.u-border-bottom:after {
		border-bottom: 1px solid #FFC251 !important;
	}
</style>